
// import React from "react";
// import Draggable from 'react-draggable';
// import { uuid } from 'uuidv4';

//export type IProps = { name: string; components:[any]; };
//type IPos = {x:number, y:number};

// export class Layout extends React.Component {

//     _isMounted = false;
//     //position = {x:10, y:10};

//     constructor(props) {
//         console.log(props);
//         super(props)
//         this.state = {
//             position:{
//                 x: 10, y: 0
//             }
//         };
//     }

//     // componentDidMount(){
//     //     this._isMounted = true;
//     // }

//     // componentWillUnmount() {
//     //     this._isMounted = false;
//     // }

//     handleStop = (event, info) => {
//         let x = info?.x;
//         let y = info?.y;
//         if(x%2 == 1) x += 1;
//         if(y%2 == 1) y += 1;
//         if(x<=0) x = 0;
//         if(x>=375) x=370;
//         if(y<=0) y = 0;
//         if(y>=812) y=810;
//         // if (this._isMounted) {
//         //     this.setState({position:{x:x,y:y}});
//         // }
//     }

//     // getPosition = () => {
//     //     return this.position;//{x:this?.position?.x, y:this?.position?.y};
//     // }

//     render() {
//       return (
//         this?.props?.components?.map((component)=>(
            // <Draggable scale={1} key={uuid()} onDrag={this.handleStop} position={this.state.position} >
            //     <div style={{zIndex:1000}}>
            //         {component}
            //     </div>
            // </Draggable>    
//         ))
//       );
//     }
// }
import { useEffect, useState } from 'react';
import Draggable from 'react-draggable';
import { uuid } from 'uuidv4';

export type IProps = { name: string; component:any; position:any; setMessage:any};
//type IPos = {x:number, y:number};
// (props:any)
const Component: React.FC<IProps> = (props:any) => {

  //const [state, setState] = useState('test');
  useEffect(()=>{
  },[])

  const handleStop = (event:any, info:any) => {
    let x = info?.x;
    let y = info?.y;
    // if(x%2 == 1) x += 1;
    // if(y%2 == 1) y += 1;
    // if(x<=0) x = 0;
    // if(x>=375) x=370;
    // if(y<=0) y = 0;
    // if(y>=812) y=810;
    props?.setMessage({"name":props.name,"position":{"x":x,"y":y}})
    //setState(x);
  }

  const handleDrag = (event:any, info:any) => {

  }

  return (
      <>
      <Draggable scale={1} key={uuid()} onDrag={handleDrag} onStop={handleStop} position={props?.position}>
        <div style={{zIndex:1000,position:'absolute'}}>
            {props.component}
        </div>
      </Draggable> 
      </>
  );
};

export default Component;
